<template>
	<view class="center mar-15" @click="$emit('click')">
		<view class="record-btn" :style="styleObject">
			<view class="btn-text">{{content}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			content: {
				type: String,
				default: "查看缴费记录"
			},
			bg: { // 直接输入背景颜色即可 如 red blue  #aaa
				type: String,
				default: 'linear-gradient(139deg, #76E1E7 0%, #40CFE6 100%)'
			},
			width: {
				type: String,
				default: '80%'
			}
		},
		computed: {
			styleObject() {
				return {
					'--dynamic-color': this.bg, // 使用动态颜色值
					'background': 'var(--dynamic-color)', // 在样式中使用这个动态变量
					width: this.width
				}
			}
		},
		data() {
			return {

			}
		},
		methods: {}
	}
</script>

<style scoped>
	.bg {
		background: linear-gradient(139deg, #76E1E7 0%, #40CFE6 100%);
	}

	.record-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 40px;
		/* width: 90%; */

		border-radius: 166px 166px 166px 166px;

		.btn-text {
			height: 30px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			font-size: 20px;
			color: #FFFFFF;
			line-height: 30px;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

	}
</style>